<template>
  <a-tree-select
    v-model="myValue"
    :tree-data="treeData"
    :show-search="true"
    :style="`width: ${width}`"
    :dropdown-style="{
      maxHeight: '400px',
      overflow: 'auto',
    }"
    placeholder="请选择枚举"
    searchPlaceholder="输入关键字搜索"
    @change="change"
    allowClear
  >
  </a-tree-select>
</template>
<script>
export default {
  props: {
    // 绑定字段名称
    field: {
      type: String,
      require: true,
    },
    // 当前组件下标
    index: {
      type: Number,
    },
    // 回显值
    value: {
      type: String,
    },
    width: {
      type: String,
      default: '50%',
    },
  },
  data() {
    return {
      myValue: this.value || undefined,
      treeData: this.generateData(this.$store.state.form.formData.enumList) || [],
    }
  },
  created() {},
  watch: {
    value(val) {
      console.log('枚举', val)
      this.myValue = val || undefined
    },
  },
  methods: {
    // 初始化数据
    generateData(enumList) {
      let tempList = enumList.map((v) => {
        return {
          label: `${v.value} - ${v.label}`,
          value: v.value,
        }
      })
      // 自定义枚举
      let arr = [
        {
          label: 'apl_applicant-自定义属性(行政复议申请人)',
          value: 'apl_applicant',
        }
      ]
      // tempList.concat(arr)
      arr.forEach(v => {
        tempList.push(v)
      })
      // console.log('tempList', tempList)
      return tempList
    },
    // 树下拉回显
    change(value) {
      this.$emit('f_setEnum', value, this.field, this.index)
    },
  },
}
</script>

<style lang="less" scoped>
</style>
